<template>
  <AppCard class="page-container">
    <el-scrollbar class="icons-container">
      <div class="grid">
        <div v-for="(item,index) in state.icons" :index="index" :key="index">
          <!-- <el-tooltip
            class="icon-item"
            effect="dark"
            :content="item.html"
            placement="top"
            trigger="hover"
          >
            <div>
              <component
                :is="item.name"
                style="width: 30px; height: 30px"
              ></component>
              <div class="iconname">{{ item.name }}</div>
            </div>
          </el-tooltip> -->
          <div class="icon-item" @click="iconCopy(item.html)">
            <component
              :is="item.name"
              style="width: 30px; height: 30px"
            ></component>
            <div class="iconname">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </AppCard>
</template>
<script setup>
import { ref,reactive,onMounted } from "vue";
import AppCard from "@/components/AppCardNew.vue";
import * as ElIcons from "@element-plus/icons";
import copy from 'copy-to-clipboard';
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";

const getData = () => {
  state.icons = [];
  for(const name in ElIcons){
    state.icons.push({
      name: name,
      html: '<el-icon><'+name+' /></el-icon>'
    })
  }
}

const iconCopy = (val) => {
  ElMessage.success('复制成功');
  copy(val);
}


const state = reactive({
  icons: []
})

onMounted(()=>{
  getData();
})
</script>
<style lang="scss" scoped>
.page-container{
  overflow: hidden;
}
.icons-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
}
.icon-item{
  margin: 20px;
  height: 85px;
  text-align: center;
  width: 100px;
  float: left;
  font-size: 30px;
  color: #24292e;
  cursor: pointer;
  .iconname{
    display: block;
    font-size: 13px;
    margin-top: 10px;
  }
}
</style>
